<template>
    <div class="search">
        <div class="header">
            <van-nav-bar @click-left="$router.back()">
                <template #left>
                    <svg class="icon leftIcon" aria-hidden="true">
                        <use xlink:href="#icon-xitongfanhui"></use>
                    </svg>
                </template>
                <template #title>
                    <van-search v-model="key_word" @input="onSearch" :clearable="false" background="#5E81B5"
                        placeholder="请输入搜索关键词" @search="onSearch">
                        <template #left-icon>
                            <svg class="icon searchIcon" aria-hidden="true">
                                <use xlink:href="#icon-sousuo"></use>
                            </svg>
                        </template>
                    </van-search>
                </template>
                <template #right>
                    <van-button type="primary" color="linear-gradient(to bottom, #fd9504, #fd5c0b)" size="mini" round
                        @click="SearchEvents">搜索
                    </van-button>
                </template>
            </van-nav-bar>
        </div>

        <!-- 搜索列表 -->
        <div class="about" v-if="about != 0">
            <van-cell v-for="item in about" :key="item._id" :title="item.title" />
        </div>
        <div class="history" v-else>
            <div class="title">
                <van-cell title="搜索历史">
                    <template #right-icon>
                        <van-icon name="delete-o" />
                    </template>
                </van-cell>
            </div>
        
            <div class="cell" v-for="(item, index) in search_history" :key="item.id">
                <span @click="$router.push({ name: 'list', query: { key_word: item } })">
                    {{ item }}
                </span>
                <van-icon name="close" @click="delHistory(index)" />
            </div>
        </div>
    </div>
</template>

<script>
import { Button, Search, Cell } from "vant";
import { search } from "@/API/api";
import { debounce } from '@/common/utlis';
export default {
    data() {
        return {
            key_word: "",
            skip: 0,
            limit: 10,
            about: [],
            search_history: []
        };
    },
    components: {
        [Button.name]: Button,
        [Search.name]: Search,
        [Cell.name]: Cell,
    },
    created() {
        let search_history = localStorage.getItem('search_history')
        if (search_history) {
            this.search_history = JSON.parse(search_history) || []
        }
    },
    methods: {
        delHistory(i) {
            this.search_history.splice('i', 1)
            localStorage.setItem('search_history', JSON.stringify(this.search_history))
        },
        SearchEvents() {
            this.key_word = this.key_word.trim()
            if (this.key_word == '') {
                this.$toast('搜索内容不能为空')
                return
            } else {
                let index = this.search_history.findIndex(v => v === this.key_word)
                // index===-1 就是没找到 证明没重复项 是新的
                // >0  找到 有重复项 删掉 
                if (index >= 0) {
                    this.search_history.splice(index, 1)
                }
                this.search_history.unshift(this.key_word)
                localStorage.setItem('search_history', JSON.stringify(this.search_history))
                this.$router.push({ name: 'list', query: { key_word: this.key_word } })
            }
        },
        onSearch: debounce(function () {
            console.log(this);
            let { key_word, skip, limit } = this
            key_word = key_word.trim()
            if (key_word.length == 0) {
                // this.$toast('搜索内容不能为空')
                this.about = []
                return
            } search({
                key_word, skip, limit
            }).then(res => {
                if (res.code == 0) {
                    this.about = res.data
                }
                console.log(res);
            })

        })
    },
};
</script>

<style lang="less" scoped>
::v-deep .van-button--round {
    padding: 0 10px;
}

::v-deep .van-cell {
    align-items: center;
}

::v-deep .van-search__content {
    border-radius: 10px;
}

::v-deep .van-nav-bar {
    background-color: #5e81b5;
    overflow: hidden;
}

.title .van-cell__title span {
    font-weight: 500;
    font-size: 18px;
}

.search {
    background-color: rgb(244, 246, 246);
}

.header {
    width: 375px;

    .leftIcon {
        font-size: 18px;
        color: #fff;
    }

    .searchIcon {
        font-size: 18px;
        color: rgb(163, 163, 163);
    }
}

.about,
.history {
    padding: 20px 0;
    margin-top: 20px;
    box-sizing: border-box;
    width: 375;
    border-radius: 20px 20px 0 0;
    background-color: #fff;
}

.cell {
    padding: 0 18px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    line-height: 40px;
    position: relative;
    span{
        flex: 1;
    }

    &::after {
        content: "";
        display: block;
        position: absolute;
        width: 90%;
        right: 5%;
        left: 5%;
        bottom: 0;
        height: 1px;
        background-color: #c8c7cc;
        transform: scaleY(0.5);
    }
}
</style>